<template>
  <div class="realNameApprove">
    <a-form-model :model="form5" :label-col="{span: 4}" :wrapper-col="{span: 12}"
                  :rules="rules5" ref="ruleForm5">
      <a-form-model-item label="用户姓名" prop="realName">
        <a-input v-model="form5.realName" placeholder="请输入用户姓名"/>
      </a-form-model-item>
      <a-form-model-item label="身份证号" prop="idCard">
        <a-input v-model="form5.idCard" placeholder="请输入身份证号码"/>
      </a-form-model-item>
      <a-form-model-item label="上传图片(正反)">
        <div class="clearfix">
          <a-upload action="http://20.194.170.137/miner/user/uploadFile"
                    list-type="picture-card" :headers="{Authorization:token}"
                    :file-list="fileList" @preview="handlePreview" @change="handleChange">
            <div v-if="fileList.length < 2">
              <a-icon type="plus"/>
              <div class="ant-upload-text">
                Upload
              </div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage"/>
          </a-modal>
        </div>
      </a-form-model-item>
      <a-form-model-item>
        <div style="text-align: center">
          <a-button class="sureBtn" @click="verifiedIdCard('ruleForm5')">提交</a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
  import { getLocalStorage } from "../../serves/localStorage";
  import { verifiedCard } from "../../serves";

  export default {
    name: "RealNameApprove",
    props: {},
    data() {
      const validateCard = (rule, value, callback) => {
        let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (value === '') {
          callback(new Error('请输入身份证号码！'))
        } else if (!reg.test(value)) {
          callback(new Error('身份证号码错误，请重新输入！'))
        } else {
          callback()
        }
      }
      return {
        form5: {
          realName: '',
          idCard: ''
        },
        rules5: {
          realName: [{
            required: true,
            message: '姓名不能为空！',
            trigger: 'change'
          }],
          idCard: [{
            required: true,
            validator: validateCard,
            trigger: 'change'
          }]
        },
        previewVisible: false,
        previewImage: '',
        fileList: [],
        token: '',
      }
    },
    created() {
      this.token = `Bearer ${getLocalStorage('accessToken')}`
    },
    mounted() {
    },
    methods: {
      verifiedIdCard(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let cardImages = []
            this.fileList.forEach(el => {
              cardImages.push(el.response.data)
            })
            if (cardImages.length != 2) {
              this.$message.warning('请上传身份证正反面')
              return false
            }
            let params = {
              realName: this.form5.realName,
              idCard: this.form5.idCard,
              idCardImages: cardImages.join(',')
            }
            verifiedCard(params).then(res => {
              if (res.status == 200 && res.data.status.code == 200) {
                this.$message.success('提交成功！')
                this.fileList = []
              } else {
                this.$message.warning(res.data.message)
              }
            })
          }
        })
      },
      // 上传
      getBase64(file) {
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => resolve(reader.result);
          reader.onerror = error => reject(error);
        });
      },
      handleCancel() {
        this.previewVisible = false;
      },
      handleChange(val) {
        if (val.file.status === 'done') {
          this.$message.success('上传成功！')
        }
        this.fileList = val.fileList;
      },
      async handlePreview(file) {
        if (!file.url && !file.preview) {
          file.preview = await this.getBase64(file.originFileObj);
        }
        this.previewImage = file.url || file.preview;
        this.previewVisible = true;
      },
    }
  }
</script>

<style scoped>

</style>
